<template>
    <!-- html结构 -->
    <div class="person">
        <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <hr>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="item in games" v-bind:key="item.id">{{ item.name }}  价格为￥{{ item.price }}</li>
        </ul>
        <button @click="changeGames">修改游戏名称</button>

    </div>
</template>
<script setup lang="ts" name="Person">
import {ref} from "vue";
// ref里面写的是基本数据类型，对象类型均可
// reactive里面只能写对象数据,不管数据深层次有多深，只有包裹就都是响应式
// 将基本对象类型转换为系统自带的源代码对象，proxy()类型
// 这点不同于鸿蒙的@state，深层次不具备响应式，需要用@Observed装饰器和@ObjectLink
// 或者v2版本的@ObservedV2装饰器和@Trace
// ref定义的对象响应式，其中的value里面具体的值是reactive对象即proxy对象
// 数据
let car = ref({
    brand:"audi",
    price:100
})
let games=ref([
    {id:"qwe123",name:"LOL",price:10},
    {id:"qwe124",name:"DNF",price:20},
    {id:"qwe125",name:"CSGO",price:30}
])

function changePrice(){
    //ref变为对象后可以通过value属性访问数据
    car.value.price += 10;
}
function changeGames(){
    games.value[0].name = '原神'; 
}

</script>

<style scoped>
/* css样式 */
li{
    font-size: 20px;
}
</style>